{include file="public/header" /}
<style type="text/css">
    .uploader-list {

        margin-left: -15px;

    }

    .uploader-list .info {

        position: relative;

        margin-top: -25px;

        background-color: black;

        color: white;

        filter: alpha(Opacity=80);

        -moz-opacity: 0.5;

        opacity: 0.5;

        width: 100px;

        height: 25px;

        text-align: center;

        display: none;

    }



    .uploader-list .handle {

        position: relative;

        background-color: black;

        color: white;

        filter: alpha(Opacity=80);

        -moz-opacity: 0.5;

        opacity: 0.5;

        width: 100px;

        text-align: right;

        height: 18px;

        margin-bottom: -18px;

        display: none;

    }



    .uploader-list .handle i {

        margin-right: 5px;

    }



    .uploader-list .handle i:hover {

        cursor: pointer;

    }



    .uploader-list .file-iteme {

        margin: 12px 0 0 15px;

        padding: 1px;

        float: left;

    }

    #container {
        min-width: 50px;
        min-height: 300px;
    }
</style>

<body style="background-color: #ffffff">
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>车辆名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="title" name="title" required="" lay-verify="required" autocomplete="off"
                            class="layui-input" value="{$row.title|default=''}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>标签说明</label>
                    <div class="layui-input-inline">
                        <input type="text" id="remark" name="remark" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.remark|default=''}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item" id="province">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>省份
                    </label>
                    <div class="layui-input-inline">

                        <select name="province" data-area="" lay-filter="province">
                            <option value="">选择省</option>
                            {foreach $province as $v}
                            <option value="{$v.area_code}" {if !empty($row.province) &&
                                $row.province==$v.area_code}selected{/if}>
                                {$v.name}
                            </option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="city">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>城市</label>
                    <div class="layui-input-inline">
                        <select name="city" data-area="" lay-filter="city">
                            <option value="">选择城市</option>
                            {foreach $city as $v}
                            <option value="{$v.area_code}" {if !empty($row.city) &&
                                $row.city==$v.area_code}selected{/if}>
                                {$v.name}
                            </option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="area">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>区域</label>
                    <div class="layui-input-inline">
                        <select name="area" data-area="" lay-filter="area">
                            <option value="">选择区域</option>
                            {foreach $area as $v}
                            <option value="{$v.area_code}" {if !empty($row.area) &&
                                $row.area==$v.area_code}selected{/if}>
                                {$v.name}
                            </option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="street">
                    <label for="L_choose_name" class="layui-form-label">
                        街道(不设置则按区域设置价格)</label>
                    <div class="layui-input-inline">
                        <select name="street" data-area="" lay-filter="street">
                            <option value="">选择街道</option>
                            {foreach $street as $v}
                            <option value="{$v.id}" {if !empty($row.street) && $row.street==$v.id}selected{/if}>
                                {$v.name}
                            </option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>是否支持搬运</label>
                    <div class="layui-input-inline">
                        <select name="type" lay-verify="required">
                            <option value="1" {if !empty($row.type) && $row.type==1}selected{/if}>仅拉货</option>
                            <option value="2" {if !empty($row.type) && $row.type==2}selected{/if}>可搬货</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="cover" class="layui-form-label">
                        <span class="x-red">*</span>车辆图片</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test2">多图片上传</button>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
                                预览图：
                                <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">
                                    {if !empty($row.images)}
                                    {foreach $row.images as $v}
                                    <div class="file-iteme">
                                        <div class="handle" style="display: none;">
                                            <i class="layui-icon layui-icon-delete"></i>
                                        </div><img style="width: 100px;height: 100px;" src="{$v}">
                                        <input type="hidden" name="images[]" value="{$v}">
                                    </div>
                                    {/foreach}
                                    {/if}
                                </div>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>参数信息</label>
                    <div class="layui-input-inline">
                        <table class="layui-table layui-form" id="table2" lay-filter="table2">
                            <thead>
                                <tr>
                                    <td>
                                        <div class="layui-table-cell">参数</div>
                                    </td>
                                    <td>
                                        <div class="layui-table-cell">参数值</div>
                                    </td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>载重
                                    </td>
                                    <td><input required="" lay-verify="required" type="text" id="layui-input"
                                            class="layui-input" name="params[0][value]"
                                            value="{$row.params.0.value|default=''}">
                                    </td>
                                </tr>
                                <tr>
                                    <td>尺寸
                                    </td>
                                    <td><input required="" lay-verify="required" type="text" id="layui-input"
                                            class="layui-input" name="params[1][value]"
                                            value="{$row.params.1.value|default=''}">
                                    </td>
                                </tr>
                                <tr>
                                    <td>体积
                                    </td>
                                    <td><input required="" lay-verify="required" type="text" id="layui-input"
                                            class="layui-input" name="params[2][value]"
                                            value="{$row.params.2.value|default=''}">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>起步费(含5公里)</label>
                    <div class="layui-input-inline">
                        <input type="number" id="start" name="start" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.start|default=''}" placeholder="发布信息标题">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>5-25公里每公里费用</label>
                    <div class="layui-input-inline">
                        <input type="number" id="every1" name="every1" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.every1|default=''}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>25-50公里每公里费用</label>
                    <div class="layui-input-inline">
                        <input type="number" id="every2" name="every2" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.every2|default=''}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>50-100公里每公里费用</label>
                    <div class="layui-input-inline">
                        <input type="number" id="every3" name="every3" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.every3|default=''}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>100公里以上每公里费用</label>
                    <div class="layui-input-inline">
                        <input type="number" id="every" name="every" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.every|default=''}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>基础搬运费</label>
                    <div class="layui-input-inline">
                        <input type="number" id="handling" name="handling" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.handling|default=''}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>大物件基础搬运费</label>
                    <div class="layui-input-inline">
                        <input type="number" id="bighandling" name="bighandling" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.bighandling|default=''}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>大件楼层费(每大件每层楼的搬运费)</label>
                    <div class="layui-input-inline">
                        <input type="number" id="floorfee" name="floorfee" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.floorfee|default=''}" placeholder="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>等候时间(分钟)</label>
                    <div class="layui-input-inline">
                        <input type="number" id="time" name="time" required="" lay-verify="required" autocomplete="off"
                            class="layui-input" value="{$row.time|default=''}" placeholder="输入服务等候时间">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>超时等候每分钟收费(单位:元)</label>
                    <div class="layui-input-inline">
                        <input type="number" id="pedfee" name="pedfee" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.pedfee|default=''}"
                            placeholder="输入服务等候时间">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_choose_name" class="layui-form-label">
                        <span class="x-red">*</span>载货空间及重量</label>
                    <div class="layui-input-inline">
                        <input type="text" id="weight" name="weight" required="" lay-verify="required"
                            autocomplete="off" class="layui-input" value="{$row.weight|default=''}"
                            placeholder="输入服务等候时间">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="layeditDemo" class="layui-form-label">
                        可装载|不可装载等信息</label>
                    <div class="layui-input-inline" style="width: 60%;">
                        <textarea id="infos"
                            name="reference">{if !empty($row.reference)}{:htmlspecialchars_decode($row.reference)}{/if}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <input type="hidden" value="{$row.id|default=''}" name="id">
                    <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" class="layui-btn layui-btn-primary" onclick="IframeClose()">取消</button>
                </div>
            </form>
        </div>
    </div>

    {include file="public/footer" /}
    <script src="/static/leyedit/Layui-KnifeZ/layui.all.js"></script>
    <script src="/static/leyedit/ace/ace.js"></script>
    <script src="/static/leyedit/Layui-KnifeZ/tableSelect.js"></script>
    <script>
        // 删除图片
        $(document).on("click", ".file-iteme .handle", function (event) {
            $(this).parent().remove();
        });
        $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
            if (event.type === "mouseenter") {
                //鼠标悬浮
                $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            } else if (event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });

        layui.use(['layedit', 'layer', 'jquery', 'form', 'upload'], function () {
            $ = layui.jquery;
            var form = layui.form
                , layer = layui.layer;
            var layedit = layui.layedit;
            var upload = layui.upload;
            var demoListView = $('#demoList'),
                uploadListIns = upload.render({
                    elem: '#test2'
                    , url: '/Base/upload_img'
                    , multiple: true
                    , before: function (obj) {
                        layer.msg('图片上传中...', {
                            icon: 16,
                            shade: 0.01,
                            time: 0
                        })
                    }
                    , done: function (res) {
                        if (res.code == 0) {
                            //上传完毕
                            $('#uploader-list').append(
                                '<div id="" class="file-iteme">' +
                                '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                                '<img style="width: 100px;height: 100px;" src=' + res.data.src + '>' +
                                '<input type="hidden" name="images[]" value="' + res.data.src + '"></div>'
                            );
                        }
                        layer.close(layer.msg());//关闭上传提示窗口
                    }
                });
            var uploadInst = upload.render({
                elem: '#test1'
                , url: '/Base/upload_img'
                , accept: 'images'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    $('#covers').val(res.data.src);
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
            layedit.set({
                //暴露layupload参数设置接口 --详细查看layupload参数说明
                uploadImage: {
                    url: '/Base/upload_img',
                    accept: 'image',
                    acceptMime: 'image/*',
                    exts: 'jpg|png|gif|bmp|jpeg',
                    size: '100240'
                }
                , calldel: {
                    url: '/Base/upload_img'
                }
                //开发者模式 --默认为false
                , devmode: false
                //插入代码设置
                , codeConfig: {
                    hide: false,  //是否显示编码语言选择框
                    default: 'javascript' //hide为true时的默认语言格式
                }
                , tool: ['strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
                    , '|', 'left', 'center', 'right'
                ]
                , height: '300px'
            });
            var infos = layedit.build('infos');
            //监听专业修改信息
            //监听省份选择市区
            form.on('select(province)', function (data) {
                $.ajax({
                    type: 'get',
                    url: '/base/getarea',
                    data: { id: data.value, level: 2 },
                    success: function (res) {
                        if (res.code == 0 && data.value > 0) {
                            var str = '<option value="">请选择城市</option>';
                            $.each(res.data, function (i, obj) {
                                str += '<option value="' + obj.area_code;
                                str += '">' + obj.name;
                                str += '</option>';
                            });
                            $('select[name="city"]').html(str);
                            form.render();
                        }
                    }
                });
                return false;
            });

            form.on('select(city)', function (data) {
                $.ajax({
                    type: 'get',
                    url: '/base/getarea',
                    data: { id: data.value, level: 3 },
                    success: function (res) {
                        if (res.code == 0 && data.value > 0) {
                            var str = '<option value="">请选择区域</option>';
                            $.each(res.data, function (i, obj) {
                                str += '<option value="' + obj.area_code;
                                str += '">' + obj.name;
                                str += '</option>';
                            });
                            $('select[name="area"]').html(str);
                            form.render();
                        }
                    }
                });
                return false;
            });


            form.on('select(area)', function (data) {
                $.ajax({
                    type: 'get',
                    url: '/base/getarea',
                    data: { id: data.value, level: 4 },
                    success: function (res) {
                        if (res.code == 0 && data.value > 0) {
                            var str = '<option value="">请选择街道</option>';
                            $.each(res.data, function (i, obj) {
                                str += '<option value="' + obj.id;
                                str += '">' + obj.name;
                                str += '</option>';
                            });
                            $('select[name="street"]').html(str);
                            form.render();
                        }
                    }
                });
                return false;
            });
            //监听提交
            form.on('submit(add)', function (data) {
                data.field.reference = layedit.getContent(infos);
                //发异步，把数据提交给php
                $.ajax({
                    'type': 'post',
                    data: data.field,
                    success: function (res) {
                        console.log(res);
                        if (res.status == 0) {
                            layer.msg(res.msg, { icon: 6, time: 1000 }, function () {
                                // 获得frame索引
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.location.reload();
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, { icon: 2, time: 1000 });
                        }
                    }
                });
                return false;
            });
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                type: 'datetime',
                elem: '#dates' //指定元素
            });
        });
    </script>

</body>

</html>